<template>
  <!-- 用户设置 -->
	<div>
    <ContainerTitle text="账号信息"></ContainerTitle>
		<el-form class="formDiv" ref="form" :model="detail" label-width="90px" style="text-align: left;">
			<el-form-item label="用户名：">
				<el-input placeholder="请输入" v-model.trim="detail.userName" style="width: 360px;" :disabled="!userNameCanEdit"></el-input>
				<i v-if="!userNameCanEdit || oldUserName == detail.userName" class="el-icon-edit" @click="edit"></i>
				<span style="cursor: pointer;color:#045db9;" v-if="userNameCanEdit && oldUserName != detail.userName" @click="update">修改</span>
			</el-form-item>
			<el-form-item label="手机号：">
				<el-input placeholder="请输入" v-model.trim="detail.userPhone" style="width: 360px;" :disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="绑定企业：">
				<el-input placeholder="请输入" v-model.trim="detail.companyName" style="width: 360px;" :disabled="true"></el-input>
			</el-form-item>
			<el-form-item label="">
        <Buttons @toChangePassword="toChangePassword" :buttons="buttons" class="btns"></Buttons>
				<!-- <div class="c-p-btn" @click="toChangePassword">修改密码</div> -->
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
  import { getUserData, update } from "@/common/api/company.js";
  export default {
    data(){
      return{
        buttons:[{ text: "修改密码", type: "success", size: "l", method: "toChangePassword" }],
        name: "usersettings",
        crumbs: [{
					label: '企业空间',
					value: 'company'
				},{
					label: '用户设置', value: '', choose: true
				}],
				detail: {
					userName: '-',
					userPhone: '-',
					companyName: '-'
				},
				oldUserName: '-',
				userNameCanEdit: false
      }
    },
		created(){
			this.getUserData()
		},
		methods: {
			async getUserData(){
				let res = await getUserData();
      	if(res.code == 200) {
					this.detail = res.data
					this.oldUserName = this.detail.userName
				}
			},
			edit() {
				this.userNameCanEdit = !this.userNameCanEdit
			},
			checkUserName(){
				let value = this.detail.userName
				// 只能输入汉字
				let check = /^[\u4E00-\u9FA5]+$/
				// 4-16个字节，仅可包含大小写字母，数字，中文，下划线
				let check1 = /^[\u4E00-\u9FA5a-zA-Z0-9_]{4,16}$/
				let nameShow = !check1.test(value)
				let swita = false
				if (value === '') {
					this.$message.error("请输入新用户名");
					return false
				}
				if(check.test(value) && value.length > 8){
					this.$message.error("全汉字只能是2-8位");
					return false
				}
				if(nameShow) {
					// 如果输入全是中文，两个字以上也可以给他过
					if(check.test(value) && value.length > 2){
						swita = false
					} else {
						swita = true
					}
				}
				if(swita){
					this.$message.error("4-16个字节，仅可包含大小写字母，数字，中文，下划线");
					return false
				}
				return true
			},
			async update(){
				if(this.checkUserName()){
					let res = await update({ userName: this.detail.userName });
					if(res.code == 200){
						this.$message.success(res.msg)
						this.oldUserName = this.detail.userName
						this.userNameCanEdit = false
					} else {
						this.$message.error(res.msg)
					}
				
				}
			},
			toChangePassword(){
				this.$router.push({name: 'changePassword'})
			}
		},
  }
</script>
<style scoped>
  .btns{
    justify-content: left !important;
  }
	.el-icon-edit {
		cursor: pointer;
		font-size: 20px;
	}

  .breadcrumb {
		width: 1000px;
		margin: 20px 0;
	}

	.roomDiv {
		display: flex;
		justify-content: center;
	}

	.roomDiv .leftDiv {
		width: 200px;
		text-align: left;
	}

	.roomDiv .rightDiv {
		width: 800px;
		margin-left: 30px;
	}
  .titleDiv {
		border-bottom: 2px solid #045db9;
		text-align: left;
		padding: 10px;
		font-size: 20px;
		font-weight: bold;
		color: #045db9;
		margin-bottom: 20px;
	}
  .layout {
		min-height: 100vh;
		position: relative;
		padding-bottom: 150px;
		box-sizing: border-box;
	}

	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.c-p-btn {
		background: #045db9;
		border-radius: 3px;
		color: #fff;
		font-size: 14px;
		text-align: center;
		width: 120px;
		height: 40px;
		cursor: pointer;
	}
</style>